<template>
  <template v-if="user">
    <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="账号" :value="user.userAccount"/>
    <van-cell title="头像" is-link @click="toEdit('avatarUrl','头像',user.avatarUrl)">
      <img style="height: 48px;" :src="user.avatarUrl" alt="头像" />
    </van-cell>
    <van-cell title="性别" is-link :value="user.gender === 0 ? '男' : '女'" @click="toEdit('gender','性别',user.gender)"/>
    <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone', '电话', user.phone)"/>
    <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email', '邮箱', user.email)"/>
    <van-cell title="星球编号" :value="user.planetCode"/>
    <van-cell title="注册时间" :value="new Date(user.createTime).toLocaleString()"/>
  </template>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getCurrentUser} from "../services/user.ts";
import {showFailToast} from "vant";

// const user = {
//   username: 'Recall',
//   id: 1,
//   userAccount: 'recall',
//   avatarUrl: 'https://recallliving.oss-cn-wuhan-lr.aliyuncs.com/%E5%A4%B4%E5%83%8F.jpg',
//   gender: '男',
//   phone: '15527672729',
//   email: '1989424334@qq.com',
//   createTime: new Date(),
//   planetCode: '1',
//   tags: 'developer,designer',
// };

const user = ref();

onMounted(async () => {
  try {
    user.value = await getCurrentUser();
    console.log('User data:', user.value);// 添加调试信息
    if (user.value === null){
      showFailToast('请先登录!')
      await router.push('/user/login');
    }
  } catch (error) {
    console.error('Failed to fetch user data:', error);
  }
});



const router = useRouter();

const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue
    }
  })
};
</script>

<style scoped>

</style>
